<template>
	<a-row :gutter="10" justify="start" v-if="!props.hiddenFlag">

		<a-col :span="24">
			<a-card :borderd="false">
				<a-input-search placeholder="输入关键字进行过滤" v-model:value="keywords"></a-input-search>
			</a-card>
		</a-col>
		<a-col :span="24">
			<a-card :borderd="false">
				<a-tree :style="style" v-if="data.length > 0" :treeData="data" node-key="id" default-expand-all
						:field-names="defaultProps" @select="handleNodeClick" ref="tree">

					<template #title="{ key: treeKey, name, id }">

						<a-dropdown :trigger="['contextmenu']">
							<span>
								<span v-if="name.indexOf(keywords) > -1">
									{{ name.substring(0, name.indexOf(keywords)) }}
									<span style="color: #f50">{{ keywords }}</span>
									{{ name.substring(name.indexOf(keywords) + keywords.length) }}
								</span>
								<span v-else>{{ name }}</span>
							</span>
							<template #overlay>
								<a-menu @click="({ key: action }) => handleCommand(action, { name, id })">
									<a-menu-item key="add">新增</a-menu-item>
									<a-menu-item key="edit">编辑</a-menu-item>
									<a-menu-item key="delete">删除</a-menu-item>
								</a-menu>
							</template>
						</a-dropdown>
					</template>
				</a-tree>
			</a-card>
		</a-col>
	</a-row>


	<a-modal v-model:open="groupDiag.dialogFormVisible" @ok="saveGroup" @cancel="groupDiag.dialogFormVisible = false"
			 :closable="false">
		<a-form :model="groupDiag">
			<a-form-item label="名称">
				<a-input v-model:value="groupDiag.name" autocomplete="off"></a-input>
			</a-form-item>
			<a-form-item label="编码">
				<a-input :disabled="groupDiag.action == 'edit'" v-model:value="groupDiag.code"
						 autocomplete="off"></a-input>
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<script setup>
import groupApi from "@/api/group/groupApi";
import {
	watch
} from "vue";
const {proxy} = getCurrentInstance();
const props = defineProps(["selectTree", "hiddenFlag", 'operaCallback', "relationTypeCode", "groupTreeUrl", "productId", "height"])
const data = ref([])
const tree = ref();

let height = props.height;
if (typeof height == 'number') {
	height = height + "px";
}

const style = ref({
	width: '100%',
	height: height,
	minHeight: "400px"
})

const keywords = ref("");

const currentGroupId = ref();
const defaultProps = ref({
	children: 'children',
	title: 'name',
});

const groupDiag = ref({
	dialogFormVisible: false,
	name: '',
	code: '',
	action: '',
	parentId: null,
	id: null
})


const handleNodeClick = (key, {node: {dataRef}}) => {
	currentGroupId.value = dataRef.id;
	if (props.selectTree) {
		props.selectTree(dataRef.id, dataRef.groupCode, dataRef.name);
	}
}

const handleCommand = async (action, data) => {
	if (action === "add") {
		groupDiag.value.action = action;
		groupDiag.value.name = "";
		groupDiag.value.id = null;
		groupDiag.value.code = null;
		groupDiag.value.parentId = data.id;
		groupDiag.value.dialogFormVisible = true;

	} else if (action === "delete") {
		alert(data.id)
		await deleteGroup(data.id);
		if (props.operaCallback) {
			props.operaCallback(action, 'group', data)
		}
	} else if (action === "edit") {
		await queryGroupById(data.id);
		groupDiag.value.dialogFormVisible = true;
		// groupDiag.value.parentId = null;
		groupDiag.value.action = action;

	}


	// this.mouseleave(data)
}
const saveGroup = async () => {
	if (groupDiag.value.name == null) {
		return;
	}
	if (groupDiag.value.action == 'add') {
		let result = await groupApi.add({
			...groupDiag.value,
			relationTypeCode: props.relationTypeCode,
			productId: props.productId
		});
		groupDiag.value.id = result;
		await queryGroupTree();
	} else if (groupDiag.value.action == "edit") {
		await groupApi.updateById({id: groupDiag.value.id, name: groupDiag.value.name});
	}
	if (props.operaCallback) {
		props.operaCallback(groupDiag.value.action, 'group', {
			...groupDiag.value
		})
	}
	groupDiag.value.id = null;
	groupDiag.value.parentId = null;
	groupDiag.value.code = null;
	groupDiag.value.name = "";
	groupDiag.value.dialogFormVisible = false;
	await queryGroupTree();


}
const deleteGroup = async (id) => {
	await groupApi.deleteById({id: id});
	await queryGroupTree();
}
const queryGroupTree = async () => {
	if (!props.relationTypeCode) {
		return
	}
	if (props.groupTreeUrl != null) {
		const d = await groupApi.queryGroupTreeByUrl({
			relationTypeCode: props.relationTypeCode,
			productId: props.productId
		}, props.groupTreeUrl);
		data.value = d;
	} else {
		const d = await groupApi.queryGroupTree({
			relationTypeCode:
			props.relationTypeCode,
			productId: props.productId
		});
		data.value = d;
	}

}
const queryGroupById = async (id) => {
	const data = await groupApi.queryGroupById({id: id});
	if (!data) {
		return;
	}
	groupDiag.value = data;
}
onMounted(() => {
	queryGroupTree();
})

const show = (action, data) => {
	handleCommand(action, data)
}

defineExpose({
	show
})
</script>

<style scoped></style>
